<template>
    <transition name="slide">
   <div class="singer-detail">
    <musicList :bgImage="bgImg" :songs="songs" :title="title"></musicList>
    </div> 
    </transition>
</template>
<script>
import {mapGetters} from 'vuex'
import {getSingerDetail} from 'api/singer'
import {ERR_OK} from 'api/config'
import {createSong,normalizeSongs} from 'common/js/song'
import musicList from '../music-list/music-list'
export default {
    components:{
        musicList
    },
    computed:{
        bgImg(){
            return this.singer.imgSrc
        },
        title(){
            return  this.singer.Fsinger_name
        },
        ...mapGetters({
            singer:"singer"
        }),
    },
    data(){
        return {
            songs:[]
        }
    },
    methods:{
    //     _normalizeSongs(list){
    //      let ret=[]
    //      list.forEach(item => {
    //     if(item.musicData.songid&&item.musicData.albummid){
    //         ret.push(createSong(item.musicData))
    //     }
    //      });
    //      return ret
    //   },
      _getDetail(id){
          var  _this=this
      if(!id){
       this.$router.push({path:"/singer"})
       return
      }
      getSingerDetail(id).then(function(res){
          if(res.code === ERR_OK){
              _this.songs=normalizeSongs(res.data.list)
          } 
          console.log(_this.songs)
      })
      }
    },
    mounted(){
        this._getDetail(this.singer.Fsinger_mid)
    }
}
</script>
<style lang="stylus" scoped>
@import '~common/stylus/variable';
 .slide-enter-active, .slide-leave-active
    transition: all 0.3s

  .slide-enter, .slide-leave-to
    transform: translate3d(100%, 0, 0)
.singer-detail{
    position fixed
    z-index 100
    top 0
    left 0
    right 0
    bottom 0
    background white
}
</style>

